<template>
  <div class="container">
    <div class="top"></div>
    <div class="header">
      <div class="header-left">
        <el-input placeholder="请输入要搜索的资讯" v-model="searchtext" style="width: 20rem; margin-left: 9rem">
          <el-button slot="append" icon="el-icon-search" @click="toSearch"></el-button>
        </el-input>
      </div>
    </div>
    <div class="center">
      <div class="news-news" v-for="(item, index) in $store.state.newnews" :key="index">
        <div class="news-img"><img :src="item.news_cover"/></div>
        <ul class="probootstrap-news">
          <li>
            <h3>
              <a @click="tonewsdetail(index)" class="dianjitexiao">{{ item.news_name }}</a>
            </h3>
            <span class="probootstrap-date">{{ item.news_create_time }}</span>
            <p style="width: 100%; height: 10rem; display: -webkit-box; overflow: hidden;
            text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 10;">
              {{ item.news_detail }}
            </p>
          </li>
        </ul>
      </div>
    </div>
    <div class="newsfooter">
      <div class="block">
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            layout="total, prev, pager, next, jumper"
            :total="pagesize * 2"
            :page-size="2"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {request} from '../api/axios.js';

export default {
  name: 'news',
  created() {
    this.getnewnews();
  },
  methods: {
    // 搜索请求
    toSearch() {
      request({
        url: '/v1/news/searchnews',
        method: 'post',
        data: {
          search_text: this.searchtext
        }
      }).then(res => {
        this.pagesize = 1
        this.$store.state.newnews = res.data.data.slice(0, 2)
        res.data.data.map(item => {
          item.news_cover = this.$store.state.publicStaticPath + item.news_cover;
        });
      });

    },
    getnewnews() {
      request({
        url: '/v1/news/newspage',
        method: 'post',
        data: {
          page: 1
        }
      }).then(res => {

        this.pagesize = res.data.pageNum;
        this.$store.state.newnews = res.data.data;
        res.data.data.map(item => {
          item.news_cover = this.$store.state.publicStaticPath + item.news_cover;
        });
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage1 = val
      request({
        url: '/v1/news/newspage',
        method: 'post',
        data: {
          page: val
        }
      }).then(res => {
        this.$store.state.newnews = res.data.data;
        res.data.data.map(item => {
          item.news_cover = this.$store.state.publicStaticPath + item.news_cover;
        });
      });
    },
    tonewsdetail(index) {
      let nowid = this.$store.state.newnews[index].id;
      this.$store.dispatch('tonewsdetail', index);
      this.$router.push({
        path: '/newsdetail',
        query: {index: nowid}
      });
    }
  },
  data() {
    return {
      searchtext: '',
      newnews: {
        // imgurl:'http://8.136.157.194:8000/media/',
        id: 1,
        news_collect_num: 0,
        news_cover: '',
        news_create_time: '',
        news_detail: '',
        news_initiator_id: 21,
        news_initiator_phone: '',
        news_name: '',
        news_status: '',
        news_tag: ''
      },
      currentPage1: 0,
      pagesize: 1,
      options: [
        {
          value: '选项1',
          label: '陕西省'
        },
        {
          value: '选项2',
          label: '山西省'
        },
        {
          value: '选项3',
          label: '山东省'
        },
        {
          value: '选项4',
          label: '河南省'
        },
        {
          value: '选项5',
          label: '河北省'
        }
      ],
      value: '',
      cities: [
        {
          cityvalue: 'Beijing',
          label: '北京'
        },
        {
          cityvalue: 'Shanghai',
          label: '上海'
        },
        {
          cityvalue: 'Nanjing',
          label: '南京'
        },
        {
          cityvalue: 'Chengdu',
          label: '成都'
        },
        {
          cityvalue: 'Shenzhen',
          label: '深圳'
        },
        {
          cityvalue: 'Guangzhou',
          label: '广州'
        }
      ],
      cityvalue: ''
    };
  }
};
</script>

<style scoped>
.container {
  width: 100%;
}

.container .top {
}

.header {
  display: flex;
  margin: 2rem 0rem -2rem 3rem; /* 第一个是上 ,第二个是右，第三个是下，第四个是左*/
}

.header .header-right {
  width: 10rem;
  margin-right: 2rem;
}

.center {
  justify-content: center;
  margin: 2rem 0 2rem 0; /* 第一个是上 ,第二个是右，第三个是下，第四个是左*/
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.news-news {
  text-align: left;
  width: 35rem;
  margin-right: 2rem;
  display: flex;
  margin: 2rem 1rem 0 3rem; /* 第一个是上 ,第二个是右，第三个是下，第四个是左*/
}

.news-img img {
  width: 16rem;
  height: 16rem;
}

.probootstrap-news {
  width: 20rem;
  margin-left: 4rem;
  display: flex;
}

.probootstrap-news li {
  list-style: none;
  display: block;
}

.probootstrap-news li p {
  list-style: none;
  color: #637381;
  line-height: 26px;
  font-size: 16px;
  font-weight: 300;
  font-family: Lato, Arial, sans-serif;
}

.probootstrap-news li a {
  color: #fdbe34;
  text-decoration: none;
  transition: 0.3s all;
}

.probootstrap-news li a:hover {
  color: #333;
  text-decoration: none;
}

.probootstrap-news li .probootstrap-date {
  color: #ccc;
  text-transform: uppercase;
}

.newsfooter {
  margin-bottom: -15rem;
}

.probootstrap-news li .news-routerlink {
  color: white;
}

.dianjitexiao {
  cursor: pointer;
}

.block {
  margin-left: 35rem;
  margin-bottom: -15rem;
}
</style>
